<template>
  <div class="error-container">
    <div class="error-content">
      <div class="error-icon">
        <el-icon><WarningFilled /></el-icon>
      </div>
      <h1 class="error-code">
404
</h1>
      <p class="error-message">
抱歉，您访问的页面不存在
</p>
      <div class="error-actions">
        <el-button
type="primary" @click="goHome">
返回首页
</el-button>
        <el-button @click="goBack">
返回上一页
</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { WarningFilled } from '@element-plus/icons-vue'

  const router = useRouter()

  // 返回首页
  const goHome = () => {
    router.push('/')
  }

  // 返回上一页
  const goBack = () => {
    router.back()
  }
</script>

<style scoped>
  .error-container {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
    padding: 20px;
  }

  .error-content {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
  }

  .error-icon {
    font-size: 60px;
    color: #e6a23c;
    margin-bottom: 20px;
  }

  .error-code {
    font-size: 80px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #303133;
  }

  .error-message {
    font-size: 16px;
    color: #606266;
    margin-bottom: 30px;
  }

  .error-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
</style>
